<template>
  <AxiomDialog
    :model-value="true"
    :title="title"
    :show-close="false"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    width="420px"
    @closed="handleClosed"
  >
    <div class="axiom-confirm-dialog-body">
      <AxiomIcon :name="icon" class="axiom-confirm-dialog-icon" />
      <div class="axiom-confirm-dialog-content">
        <p class="axiom-confirm-dialog-message">{{ content }}</p>
      </div>
    </div>
    <template #footer>
      <AxiomButton @click="handleCancel">{{ cancelText }}</AxiomButton>
      <AxiomButton type="primary" @click="handleConfirm">{{ confirmText }}</AxiomButton>
    </template>
  </AxiomDialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AxiomDialog from './AxiomDialog.vue';
import AxiomButton from './AxiomButton.vue';
import AxiomIcon from './AxiomIcon.vue';

const props = defineProps({
  title: { type: String, default: '确认' },
  content: { type: String, required: true },
  icon: { type: String, default: 'warning' },
  confirmText: { type: String, default: '确认' },
  cancelText: { type: String, default: '取消' },
  onConfirm: { type: Function, required: true },
  onCancel: { type: Function, required: true },
  onClosed: { type: Function, default: () => {} },
});

const handleConfirm = () => {
  props.onConfirm();
};

const handleCancel = () => {
  props.onCancel();
};

const handleClosed = () => {
  props.onClosed();
};
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-confirm-dialog';
</style> 